<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <link rel="stylesheet" th:href="@{/webjars/layui/2.6.8/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{layuimini/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{layuimini/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div-content {
            background-color: white;
            border-radius: 5px;
            padding: 15px;
        }

        .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #e6e6e6;
        }
    </style>
</head>

<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" action="">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <label class="layui-form-label">开始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startDate" id="startDate" lay-verify="date"
                               placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <label class="layui-form-label">结束日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endDate" id="endDate" lay-verify="date" placeholder="yyyy-MM-dd"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" lay-submit lay-filter="btn-search-filter">查询</button>
                </div>
            </div>
        </fieldset>
    </form>
    <table id="empList" lay-filter="empList-filter"></table>
</div>
<script th:src="@{/webjars/layui/2.6.8/layui.js}"></script>
<script type="text/html" id="convertSex">
    {{#
    if(d.sex=='M'){
    return '男';
    }else {
    return '女';
    }
    }}
</script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'laydate'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var ctxPath = [[@{/}]];
        var form = layui.form;
        //执行一个laydate实例
        laydate.render({
            elem: '#endDate'//指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#startDate'//指定元素
        });
        //第一个实例
        table.render({
            elem: '#empList'
            ,toolbar: '#emp-table-toolbar'
            , url: ctxPath + 'emp/list' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                { field: 'empId', title: '员工编号', width: 100, sort: true, align: 'center' }
                , { field: 'name', title: '姓名', width: 150, align: 'center' }
                , { field: 'sex', title: '性别', width: 80, align: 'center', templet: '#convertSex' }
                , { field: 'age', title: '年龄', width: 80, align: 'center' }
                , { field: 'sal', title: '工资', width: 200, align: 'center' }
                , { field: 'birthday', title: '生日', width: 200, align: 'center' }
                , { field: 'address', title: '地址', width: 300, align: 'center' }
                , { field: 'deptName', title: '部门名称', width: 120, align: 'center' }
                , { title: '操作', width: 150, align: 'center' }
            ]]
        });

        form.on('submit(btn-search-filter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //上述方法等价于
            table.reload('empList', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: data.field.name,
                    startDate: data.field.startDate,
                    endDate: data.field.endDate
                    //…
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //触发事件
        table.on('toolbar(empList-filter)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        title :'添加员工',
                        shadeClose: true,
                        area: ['80%', '80%'],
                        content: ctxPath+'emp/add/ui' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    break;
                case 'delete':
                    alert('删除');
                    break;
                case 'update':
                    alert('编辑');
                    break;
            };
        });
    });
</script>
<script type="text/html" id="emp-table-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>
</body>
</html>